<template>
  <div class="course-upload">
    <h2>创建新课程</h2>
    <form @submit.prevent="uploadCourse">
      <div class="form-group">
        <label>课程标题</label>
        <input v-model="courseData.title" required>
      </div>

      <div class="form-group">
        <label>课程描述</label>
        <textarea v-model="courseData.description" required></textarea>
      </div>

      <div class="form-group">
        <label>课程分类</label>
        <select v-model="courseData.category" required>
          <option value="IT">IT技术</option>
          <option value="DESIGN">设计</option>
          <option value="BUSINESS">商业</option>
        </select>
      </div>

      <div class="form-group">
        <label>课程难度</label>
        <select v-model="courseData.level" required>
          <option value="BEGINNER">入门</option>
          <option value="INTERMEDIATE">中级</option>
          <option value="ADVANCED">高级</option>
        </select>
      </div>

      <div class="form-group">
        <label>课程封面</label>
        <input type="file" @change="handleCoverUpload" accept="image/*">
      </div>

      <div class="form-group">
        <label>价格</label>
        <input type="number" v-model.number="courseData.price" required>
      </div>

      <button type="submit" :disabled="loading">
        {{ loading ? '上传中...' : '创建课程' }}
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { courseService } from '@/services/course.service'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const courseData = ref({
  title: '',
  description: '',
  category: '',
  level: 'BEGINNER',
  price: 0,
  coverImage: null as File | null
})

const handleCoverUpload = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files) {
    courseData.value.coverImage = input.files[0]
  }
}

const uploadCourse = async () => {
  try {
    loading.value = true
    const formData = new FormData()
    
    Object.entries(courseData.value).forEach(([key, value]) => {
      if (value !== null) {
        formData.append(key, value as string | Blob)
      }
    })

    // 实际上应该调用课程创建的 API
    // await courseService.createCourse(formData)
    
    router.push('/courses')
  } catch (error) {
    console.error('课程上传失败', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.course-upload {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
}
</style>